<template>
  <div
    :class="['out-line', isMove ? 'mouse' : '']"
    :style="{
      width: width + 'px',
      height: height ? height + 'px' : 'auto',
      minHeight: minHeight + 'px',
      padding: padding + 'px',
    }"
    ref="moveRef"
    @click="toTop"
    @mousedown="mousedown"
  >
    <div class="close" @click="closeLayer" v-if="closeStatus">
      <a-icon type="close" />
    </div>
    <div class="line lt"></div>
    <div class="line rt"></div>
    <div class="line lb"></div>
    <div class="line rb"></div>
    <slot></slot>
  </div>
</template>
<script>
  import {mapActions} from 'vuex'

  export default {
    props: {
      // 宽高数据
      width: {
        type: Number,
        default: 240
      },
      height: {
        type: Number,
        default: 550
      },
      minHeight: {
        type: Number,
        default: 0
      },
      padding: {
        type: Number,
        default: 15
      },
      // 是否可移动
      move: {
        type: Boolean,
        default: true
      },
      closeStatus: {
        type: Boolean,
        default: true
      },
      id: {
        type: String,
        default: ''
      },
      position: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        isMove: false, // 是否具备移动的条件 鼠标按下才可移动
        right: 0,
        top: 0
      }
    },
    methods: {
      ...mapActions(['setZIndex', 'setLayerKey']),
      // 置顶
      toTop() {
        if (!this.move) return
      },
      // 鼠标按下
      mousedown(event) {
        const _this = this
        if (!this.move) return
        this.setZIndex(this.id)
        let t_clientX = event.clientX || event.touches[0].clientX
        let t_clientY = event.clientY || event.touches[0].clientY
        this.isMove = true
        let rightPosition = 0;
          let topPosition = 0
        document.onmousemove = (ev) => {
          if (!this.isMove) return
          const moveX = ev.clientX - t_clientX
          const moveY = ev.clientY - t_clientY
          const right = this.right - moveX <= 0 ? 0 : this.right - moveX
          const top = this.top + moveY <= 0 ? 0 : this.top + moveY
          _this.$refs.moveRef.style.right = right + 'px'
          _this.$refs.moveRef.style.top = top + 'px'
          rightPosition = right
          topPosition = top
        }
        document.onmouseup = () => {
          _this.isMove = false
          _this.setZIndex('')
          this.right = rightPosition
          this.top = topPosition
        }
      },
      // 关闭图层
      closeLayer() {
        this.setLayerKey('')
        this.$emit('closeLayer')
      }
    },
    mounted() {
      if (this.position) {
        this.$refs.moveRef.style.right = this.position.right
        this.$refs.moveRef.style.top = this.position.top
        this.top = parseFloat(this.position.top.replace(/px/gi, ''))
        this.right = parseFloat(this.position.right.replace(/px/gi, ''))
      }
    }
  }
</script>
<style lang="less" scoped>
  .out-line {
    position: relative;
    border: 1px solid rgba(2, 224, 247, 0.5);
    background: rgba(19, 28, 50, 0.8);
    box-sizing: border-box;
    .close {
      position: absolute;
      width: 17px;
      height: 17px;
      background: rgba(19, 28, 50, 0.8);
      top: -24px;
      right: 0;
      color: rgba(255, 255, 255, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      cursor: pointer;
    }
    .line {
      position: absolute;
      width: 15px;
      height: 15px;
      border-color: #02e0f7;
      border-style: solid;
    }
    .lt {
      left: 0;
      top: 0;
      border-top-width: 1px;
      border-left-width: 1px;
      border-right-width: 0;
      border-bottom-width: 0;
    }
    .rt {
      right: 0;
      top: 0;
      border-top-width: 1px;
      border-left-width: 0;
      border-right-width: 1px;
      border-bottom-width: 0;
    }
    .lb {
      left: 0;
      bottom: 0;
      border-top-width: 0;
      border-left-width: 1px;
      border-right-width: 0;
      border-bottom-width: 1px;
    }
    .rb {
      right: 0;
      bottom: 0;
      border-top-width: 0;
      border-left-width: 0;
      border-right-width: 1px;
      border-bottom-width: 1px;
    }
  }
  .mouse {
    cursor: move;
  }
</style>
